<script setup lang="ts">
import { ref, watch } from "vue";
interface DialogData {
  id?: number;
  patientName?: string;
  deptName?: string;
  doctorName?: string;
  outpatient_code?: string;
  inpatient_code?: string;
  first_visit?: string;
  genderStr?: string;
  condition?: string;
  report?: string;
  disease?: { name: string; status: string }[];
  [key: string]: any;
}

// 定义接收的 props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  dialogData: {
    type: Object as () => DialogData,
    default: () => ({}),
  },
});
const item_smoking = ref("未选择");
const item_passive_smoking = ref("未选择");

watch(
  () => props.dialogData,
  (newData) => {
    if (newData.disease) {
      const delItemIndex = [];
      newData.disease.forEach((item, index) => {
        if (item.name === "被动吸烟") {
          if (item.status === "1") {
            item_passive_smoking.value = "是";
          } else {
            item_passive_smoking.value = "否";
          }
          delItemIndex.push(index);
        } else if (item.name === "吸烟") {
          if (item.status === "1") {
            item_smoking.value = "现在吸烟";
          } else if (item.status === "2") {
            item_smoking.value = "从不吸烟";
          } else if (item.status === "3") {
            item_smoking.value = "曾经吸烟";
          } else {
            item_smoking.value = "已戒烟";
          }
          delItemIndex.push(index);
        }
      });
    }
  },
  { immediate: true }
);

// 只需要定义更新 visible 的事件
defineEmits(["update:modelValue"]);
</script>
<template>
  <el-dialog
    :model-value="modelValue"
    title="档案详情"
    width="60%"
    @update:model-value="$emit('update:modelValue', $event)"
  >
    <el-scrollbar height="600px" class="scrollbar">
      <div class="dialog-content">
        <!-- 显示传递过来的数据 -->
        <el-descriptions :column="3" border>
          <el-descriptions-item label="档案ID">
            <el-tag type="info">{{ dialogData.id || "无" }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="患者姓名">
            {{ dialogData.patientName || "未填写" }}
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            {{ dialogData.genderStr || "未填写" }}
          </el-descriptions-item>
          <el-descriptions-item label="所属科室">
            {{ dialogData.deptName || "未分配" }}
          </el-descriptions-item>
          <el-descriptions-item label="首诊医生">
            {{ dialogData.doctorName || "未指定" }}
          </el-descriptions-item>
          <el-descriptions-item label="首诊时间">
            {{ dialogData.first_visit || "未填写" }}
          </el-descriptions-item>
          <el-descriptions-item label="门诊号">
            {{ dialogData.outpatient_code || "无" }}
          </el-descriptions-item>
          <el-descriptions-item label="住院号">
            {{ dialogData.inpatient_code || "无" }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="report">
          <el-text>{{ dialogData.report || "无" }}</el-text>
        </div>

        <div v-if="dialogData.condition" class="info">
          <h4>主诉:</h4>
          <el-text type="info">{{ dialogData.condition }}</el-text>
          <br />
          <br />
          <h4>现病史:</h4>
          <el-text type="info">{{ dialogData.present_illness }}</el-text>
        </div>
        <div
          v-if="dialogData.disease && dialogData.disease.length > 0"
          class="info"
        >
          <h4>个人史与相关史:</h4>
          <table width="100%" border="1">
            <tr>
              <th>疾病名称</th>
              <th>是否存在</th>
              <th>是否接受过正规治疗</th>
            </tr>
            <tr>
              <td>吸烟</td>
              <td>{{ item_smoking }}</td>
            </tr>

            <tr>
              <td>被动吸烟</td>
              <td>{{ item_passive_smoking }}</td>
            </tr>
            <tr :span="12" v-for="item in dialogData.disease" :key="item.name">
              <td>{{ item.name }}</td>
              <td>
                {{ item.status === "1" ? "是" : "否" }}
              </td>
              <td>
                {{ item.treatment_status === "1" ? "是" : "否" }}
              </td>
            </tr>
          </table>
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>
<style scoped>
.dialog-content {
  padding: 10px 0;
}

.report {
  margin-top: 10px;
  padding: 15px;
  background-color: #ebf5ff;
  border-radius: 4px;
  color: #f06266;
}

.info {
  margin-top: 10px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.info h4 {
  margin: 0 0 10px 0;
  color: #606266;
}

/* 美化表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

th {
  background-color: #409eff;
  color: white;
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
}

td {
  padding: 12px 15px;
  border-bottom: 1px solid #ebeef5;
}
</style>
